// 建立了一个专门处理权限路由的模块
import { constantRoutes, asyncRoutes } from '../../router'
const state = {
   // 路由表，表示当前用户所拥有的所有路由的数组
   // 一开始肯定拥有静态路由的权限
   routes: constantRoutes
}
const mutations = {
   // 定义修改 routes 的 mutations
   // payload 载荷 认为是我们登录成功需要添加的新路由
   setRoutes(state, newRoutes) {
      // 这么写不正确，因为： 例：
      // 登录 --> 管路员登录 --> 100 个页面权限 -->退出
      // 登录 --> 张三登录 --> 在管理员的100个页面权限的基础之上  + 张三权限，
      // 还是在原来静态路由的 + 张三权限    (肯定是默认 + 张三)
      // state.router = [...state.route, ...newRoutes]
      // 每次都是在静态路由的基础上去加 新的路由，不要在原有基础上加
      state.routes = [...constantRoutes, ...newRoutes]
   }
}
// 动态路由中所定义的 name ，就是我权限标识所对应的 name，
// 这个name只要能和我 userInfo --> roles --> menus 中的name能对上
// 就可以把这个路由拿过来，addRoutes 到当前的路由上
const actions = {
   // 筛选权限路由
   // 第二个参数为当前用户的所拥有的菜单的权限
   // 例：结构：menus: ['settings', 'permissions']
   // asyncRoutes 是所有的动态路由
   // 例：结构：asyncRoutes [{path: '',name:''}, {}]
   filterRoutes(context, menus) {
      const routes = []
      // 筛选出动态路由中和menus中能够对上的路由
      menus.forEach(key => {
         // key 就是标识 
         // 去asyncRoutes找对象中的name属性 等于 key ，如果找不到就没权限
         // 如果找到了要筛选出来
         // 得到一个数组，有可能是个空数组
         // 得出来数组的就是我当前用户的权限的路由，写到 routes 的表中
         // 把所有的记录都加进去
         // routes 是所有模块中满足权限要求的路由数组
         // routes 就是当前用户所拥有的动态路由的权限
         routes.push(...asyncRoutes.filter(item => item.name === key))
      })
      // 将动态路由提交给 mutations
      context.commit('setRoutes', routes)
      // state 数据是用来显示左侧菜单用的，而return是给路由去 addRoutes 用的
      // 左侧菜单跟路由是两回事
      return routes
   }
}
export default {
   namespaced: true,
   state,
   mutations,
   actions
}
